<template>
  <view class="container">
    <view class="avatar-container">
      <!-- 头像显示区域 -->
      <image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
      <button @click="changeAvatar">更换头像</button>
    </view>

    <view class="form">
      <!-- 昵称输入框 -->
      <view class="form-item">
        <text>昵称</text>
        <input v-model="nickname" type="text" placeholder="请输入昵称"></input>
      </view>

      <!-- 密码输入框 -->
      <view class="form-item">
        <text>密码</text>
        <input v-model="password" type="password" placeholder="请输入密码"></input>
      </view>

      <!-- 提交按钮 -->
      <button @click="saveChanges">保存修改</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl: '', // 头像地址
      nickname: '', // 昵称
      password: '', // 密码
    };
  },
  methods: {
    changeAvatar() {
      // 处理更换头像的逻辑
      // 可以调用uni-app提供的图片选择/上传方法
    },
    saveChanges() {
      // 处理保存修改的逻辑，可以发送请求将修改后的信息提交到后端服务器
      // 示例中只是简单地打印修改后的信息
      console.log('新的昵称：', this.nickname);
      console.log('新的密码：', this.password);
      // 可以在此处添加逻辑将数据提交到后端进行保存
    },
  },
};
</script>

<style>
/* 样式可以根据实际需求进行修改 */
.container {
  padding: 20px;
}

.avatar-container {
  text-align: center;
  margin-bottom: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.form {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
}

.form-item {
  margin-bottom: 15px;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
</style>
